<template>
 <div class="yingmoo-media">
   <ym-header></ym-header>
   <ym-medianav></ym-medianav>
   <ym-secondnav></ym-secondnav>
   
<!--  广告轮播  -->
    <div class="ym-lunbo">
      <el-carousel indicator-position="inside">
        <el-carousel-item v-for="(v,i) in banners" :key="i">
          <img :src="v.imgpath" />
        </el-carousel-item>
      </el-carousel>
    </div>

    <!--  大牌  -->
    <div class="yingmoo-column yingmoo-xxx">
      <div class="column-navbar grey">
        <h1 class="column-title">
          <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
          <span class="column-name">大牌</span>
          <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
        </h1>
        <p class="column-citys">
          <span>北京</span>
          <span>上海</span>
          <span>天津</span>
          <span>重庆</span>
          <span>全国</span>
        </p>
      </div>
      <div class="column-content">
        <dl class="media-model" v-for="n in model1" :key="n">
          <dt>
            <img width="222px" height="198px" :src="n.imgpath" />
          </dt>
          <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
          <dd class="media-text-secend">￥{{n.price}}</dd>
          <dd class="media-text-city">{{n.remark}}</dd>
        </dl>
      </div>
    </div>
    
    <!--  单立柱  -->
    <div class="yingmoo-column yingmoo-xxx">
      <div class="column-navbar grey">
        <h1 class="column-title">
          <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
          <span class="column-name">单立柱</span>
          <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
        </h1>
        <p class="column-citys">
          <span>北京</span>
          <span>上海</span>
          <span>天津</span>
          <span>重庆</span>
          <span>全国</span>
        </p>
      </div>
      <div class="column-content">
        <dl class="media-model" v-for="n in model2" :key="n">
          <dt>
            <img width="222px" height="198px" :src="n.imgpath" />
          </dt>
          <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
          <dd class="media-text-secend">￥{{n.price}}</dd>
          <dd class="media-text-city">{{n.remark}}</dd>
        </dl>
      </div>
    </div>
    
    <!--  三面翻  -->
    <div class="yingmoo-column yingmoo-xxx">
      <div class="column-navbar grey">
        <h1 class="column-title">
          <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
          <span class="column-name">三面翻</span>
          <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
        </h1>
        <p class="column-citys">
          <span>北京</span>
          <span>上海</span>
          <span>天津</span>
          <span>重庆</span>
          <span>全国</span>
        </p>
      </div>
      <div class="column-content">
        <dl class="media-model" v-for="n in model3" :key="n">
          <dt>
            <img width="222px" height="198px" :src="n.imgpath" />
          </dt>
          <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
          <dd class="media-text-secend">￥{{n.price}}</dd>
          <dd class="media-text-city">{{n.remark}}</dd>
        </dl>
      </div>
    </div>
    
    <!--  跨桥线  -->
    <div class="yingmoo-column yingmoo-xxx">
      <div class="column-navbar grey">
        <h1 class="column-title">
          <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
          <span class="column-name">跨桥线</span>
          <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
        </h1>
        <p class="column-citys">
          <span>北京</span>
          <span>上海</span>
          <span>天津</span>
          <span>重庆</span>
          <span>全国</span>
        </p>
      </div>
      <div class="column-content">
        <dl class="media-model" v-for="n in model4" :key="n">
          <dt>
            <img width="222px" height="198px" :src="n.imgpath" />
          </dt>
          <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
          <dd class="media-text-secend">￥{{n.price}}</dd>
          <dd class="media-text-city">{{n.remark}}</dd>
        </dl>
      </div>
    </div>
    
    <!--  霓虹灯  -->
    <div class="yingmoo-column yingmoo-xxx">
      <div class="column-navbar grey">
        <h1 class="column-title">
          <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
          <span class="column-name">霓虹灯</span>
          <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
        </h1>
        <p class="column-citys">
          <span>北京</span>
          <span>上海</span>
          <span>天津</span>
          <span>重庆</span>
          <span>全国</span>
        </p>
      </div>
      <div class="column-content">
        <dl class="media-model" v-for="n in model5" :key="n">
          <dt>
            <img width="222px" height="198px" :src="n.imgpath" />
          </dt>
          <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
          <dd class="media-text-secend">￥{{n.price}}</dd>
          <dd class="media-text-city">{{n.remark}}</dd>
        </dl>
      </div>
    </div>
    <ym-footer></ym-footer>
 </div>
</template>
<script>
  import ymHeader from "@/components/ymHeader.vue";
  import ymMedianav from "@/components/ymMedianav.vue";
  import ymFooter from "@/components/ymFooter.vue";
  import ymSecondnav from "@/components/ymSecondnav.vue";
  export default {
    name: "yingmoo-media",
    components: {
      ymHeader,
      ymMedianav,
      ymSecondnav,
      ymFooter
    },
    data() {
      return {
      	requestAddr:this.GLOBAL.addr,
        /* banner数据，方便修改 */
        banners: [{
          imgUrl: require('@/assets/ym-media/lunbo_images.png')
        }, {
          imgUrl: require('@/assets/ym-media/lunbo_images.png')
        }, {
          imgUrl: require('@/assets/ym-media/lunbo_images.png')
        }],
        model1: [{
          modeltext: '媒体名称媒体名称媒体名称',
          modelmoney: '价格：120万 元/年',
          modelcity: '北京西站',
          modellook: '看板'
        }, {
          modeltext: '媒体名称媒体名称媒体名称',
          modelmoney: '价格：120万 元/年',
          modelcity: '北京西站',
          modellook: '看板'
        }, {
          modeltext: '媒体名称媒体名称媒体名称',
          modelmoney: '价格：120万 元/年',
          modelcity: '北京西站',
          modellook: '看板'
        }, {
          modeltext: '媒体名称媒体名称媒体名称',
          modelmoney: '价格：120万 元/年',
          modelcity: '北京西站',
          modellook: '看板'
        }, {
          modeltext: '媒体名称媒体名称媒体名称',
          modelmoney: '价格：120万 元/年',
          modelcity: '北京西站',
          modellook: '看板'
        }],
        model2:[],
        model3:[],
        model4:[],
        model5:[],
        tetle:'name'
      }
    },
    mounted(){
		this.getDowntown(16,3);//Banner轮播图
		this.getDowntown(17,5);//大牌
		this.getDowntown(18,5);//单立柱
		this.getDowntown(19,5);//三面翻
		this.getDowntown(20,5);//跨桥线
		this.getDowntown(21,5);//霓虹灯
	},
	methods:{
		getDowntown:function(adid,limit){
	  		this.$http({
					url: this.requestAddr+'/GetJson/getDowntown/Banners?adid='+adid+"&limit="+limit,
					method: 'JSONP',
				    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
					jsonp: 'callbackparam'
				}).then(res => {
					/*console.log(res.data);*/
					if(res.data != null){
						if(adid == 16){this.banners = res.data;}
						if(adid == 17){this.model1 = res.data;}
						if(adid == 18){this.model2 = res.data;}
						if(adid == 19){this.model3 = res.data;}
						if(adid == 20){this.model4 = res.data;}	
						if(adid == 21){this.model5 = res.data;}
					}
				}).catch()
		}
	}
  }
</script>

<style scoped lang="less">
  .yingmoo-media {
    width: 100%;
    background-color: #f3f9ff;
    .ym-lunbo {
      width: 100%;
      height: 450px;
      position: absolute;
      top: 234px;
      left: 0;
      z-index: 1;
    }
/*
    .coverage {
      width: 249px;
      height: 450px;
      background-color: rgba(217, 239, 252, 0.6);
      display: block;
      z-index: 999;
      position: absolute;
      top: 45px;
      left: 247px;
      button {
        width: 130px;
        height: 45px;
        background-color: #f29600;
        color: white;
        text-align: center;
        border: none;
        font-size: 16px;
        margin-left: 60px;
        margin-top: 15px;
      }
      ul {
        margin-left: 40px;
        margin-top: 30px;
        li {
          list-style: none;
          line-height: 32px;
          font-size: 14px;
          color: #333333;
        }
        li:hover {
          color: #f29600;
        }
      }
      ul:nth-child(2) {
        float: left;
        margin-right: 50px;
      }

    }
*/
    .yingmoo-xxx {
      width: 1200px;
      height: 357px;
      margin: 0 auto;
      background-color: transparent;
      margin-top: 30px;
      .column-navbar {
        height: 44px;
        line-height: 44px;
        position: relative;
        &.grey {
          background-color: #e6e6e6;
        }
        .column-title {
          position: absolute;
          left: 0;
          top: 0;
          z-index: 1;
          width: 247px;
          color: #fbb03b;
          font-size: 18px;
          background-color: #036eb7;
          .column-icon {
            margin-left: 26px;
          }
          .column-arrow {
            position: absolute;
            right: -26px;
            top: 0;
          }
        }
        .column-citys {
          line-height: 44px;
          width: 370px;
          background: none;
          color: #999999;
          margin-right: 30px;
          float: right;
          span {
            padding-left: 20px;
            padding-right: 20px;
            font-size: 14px;
          }
        }
      }
      .column-content {
        width: 1200px;
        background-color: transparent;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        .media-model {
          width: 224px;
          height: 291px;
          margin-top: 20px;
          dd {
            background-color: white;
            height: 24px;
            line-height: 24px;
            padding-left: 10px;
          }
          .media-text-first {
            font-size: 15px;
            padding-top: 9px;
            overflow: hidden;
            text-overflow : clip;
          }
          .media-text-secend {
            font-size: 12px;
            color: red;
          }
          .media-text-city {
            font-size: 12px;
            color: #999999;
            padding-bottom: 6px;
            span {
              padding-left: 15px;
            }
          }
        }
      }
    }
  }

</style>
